import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
 Loading...

या उदाहरणात:

• MyComponent ला लेझी लोड करण्यासाठी React.lazy वापरले जाते.
• Suspense हे LazyComponent ला रॅप करते.
• fallback प्रॉप एक फॉलबॅक UI (एक लोडिंग इंडिकेटर) प्रदान करते जे MyComponent लोड होत असताना प्रदर्शित होते.

एरर बाउंड्रीजची अंमलबजावणी करणे

सस्पेन्स लोडिंग स्टेट्स हाताळत असताना, एरर बाउंड्रीज हे रिएक्ट कंपोनेंट्स आहेत जे त्यांच्या चाइल्ड कंपोनेंट ट्रीमध्ये कुठेही जावास्क्रिप्ट एरर्स पकडतात, त्या एरर्स लॉग करतात आणि संपूर्ण कंपोनेंट ट्री क्रॅश होण्याऐवजी फॉलबॅक UI प्रदर्शित करतात.

एरर बाउंड्रीज कसे कार्य करतात

एरर बाउंड्रीज हे क्लास कंपोनेंट्स आहेत जे खालील लाइफसायकल मेथड्स परिभाषित करतात:

• static getDerivedStateFromError(error): ही मेथड डिसेंडेंट कंपोनेंटद्वारे एरर थ्रो केल्यानंतर कॉल केली जाते. तिला थ्रो केलेली एरर एक आर्गुमेंट म्हणून मिळते आणि स्टेट अपडेट करण्यासाठी व्हॅल्यू रिटर्न करायला पाहिजे.
• componentDidCatch(error, info): ही मेथड डिसेंडेंट कंपोनेंटद्वारे एरर थ्रो केल्यानंतर कॉल केली जाते. तिला एरर आणि एक इन्फो ऑब्जेक्ट मिळतो ज्यात कोणत्या कंपोनेंटने एरर थ्रो केली याची माहिती असते. सेंट्री किंवा बगस्नॅग सारख्या सेवेमध्ये एरर लॉग करण्यासाठी हे एक आदर्श ठिकाण आहे.

महत्वाचे: एरर बाउंड्रीज फक्त त्यांच्या खाली असलेल्या कंपोनेंट्समधील एरर्स पकडतात. एक एरर बाउंड्री स्वतःमधील एरर पकडू शकत नाही.

उदाहरण: मूलभूत एरर बाउंड्री अंमलबजावणी

            
import React, { Component } from 'react';

class ErrorBoundary extends Component {
 constructor(props) {
 super(props);
 this.state = {
 hasError: false
 };
 }

 static getDerivedStateFromError(error) {
 // Update state so the next render will show the fallback UI.
 return {
 hasError: true
 };
 }

 componentDidCatch(error, info) {
 // You can also log the error to an error reporting service
 console.error('Caught error: ', error, info);
 }

 render() {
 if (this.state.hasError) {
 // You can render any custom fallback UI
 return 
Something went wrong.
;
 }

 return this.props.children; 
 }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

एरर बाउंड्री वापरण्यासाठी, एरर थ्रो करू शकणाऱ्या कोणत्याही कंपोनेंटला रॅप करा:

            
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
 return (
 
 
 
 );
}

export default App;

            

              
                Copy
              
            
          

सस्पेन्स आणि एरर बाउंड्रीजचे एकत्रीकरण

सस्पेन्स आणि एरर बाउंड्रीज एकत्र केल्याने खरी शक्ती मिळते. हे तुम्हाला तुमच्या ॲप्लिकेशनमध्ये लोडिंग स्टेट्स आणि एरर्स दोन्ही व्यवस्थितपणे हाताळण्याची परवानगी देते. शिफारस केलेली पद्धत म्हणजे एरर बाउंड्रीने सस्पेन्सला रॅप करणे. अशा प्रकारे, जर लेझी-लोड होणारा कंपोनेंट लोड होण्यास अयशस्वी ठरला (उदा. नेटवर्क एरर), तर एरर बाउंड्री एरर पकडू शकते आणि वापरकर्त्याला एक उपयुक्त संदेश प्रदर्शित करू शकते.

उदाहरण: सस्पेन्स आणि एरर बाउंड्रीज एकत्र करणे

            
import React, { Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
 
 Loading...